<template>
	<view class="app"> 
		<view class="order-info-top">
			<view class="order-info-top-left"> 
				<text class="order-info-status">{{orderStatusName[order.status] || ''}}</text>
				<text class="order-info-tips">感谢您使用逸合峰绿色驿站参与回收</text>
			</view>
			<view class="order-info-top-right">
				<i class="iconfont icon-huishou"></i> 
			</view>
		</view>
		<view class="order-address-info box-card" >
			<view class="order-address-info-top">
				<text class="order-card-title">预约上门</text>
				<text>预约时间：{{ order.book_time == 0?'最近两小时':order.book_time}}</text>
			</view>
			<view class="order-address-detail" > 
				<view class="order-address-detail-left"> 
					<i class="iconfont icon-shouhuodizhi"></i> 
				</view>
				<view class="order-address-detail-right">
					<view  >
						<text class="order-address-contact">{{order.address.name}}</text>
						<text class="phone-number" @click="phoneCall(order.address.mobile)">{{order.address.mobile}}</text>
					</view>
					<view style="color:#666">{{order.address.address}}</view>
				</view>
			</view>
		</view>
		<view class="order-info box-card" >
			<text class="order-card-title">预约信息</text>
			<view class="order-info-row">
				<label>回收类别：</label>
				<text>{{ order.book_category?order.book_category:'其他' }}</text>
			</view>
			<view class="order-info-row">
				<label>订单编号：</label>
				<text>{{ order.order_no }}</text>
			</view>
			<view class="order-info-row">
				<label>下单时间：</label>
				<text>{{ order.createtime }}</text>
			</view>
			<view class="order-info-row">
				<label>订单备注：</label>
				<text>{{ order.remarks?order.remarks:'无' }}</text>
			</view>
			<view class="order-waste-item" style="flex-direction: column;justify-content: flex-start;align-items: flex-start;">
				<u-upload  width="160rpx" height="160rpx" :show-progress="false" :deletable="false" :custom-btn="true"  :file-list="fileList" ></u-upload>
			</view>
		</view>
		<view class="order-info box-card"  v-if="order.recycler_id">
			<text class="order-card-title">回收员信息</text>
			<view class="order-info-row">
				<label>姓名：</label>
				<text>{{ order.recycler.name }}</text>
			</view>
			<view class="order-info-row">
				<label>手机号码：</label>
				<text class="phone-number" @click="phoneCall(order.recycler.mobile)">{{order.recycler.mobile}}</text>
			</view>
			<view class="order-info-row">
				<label>接单时间：</label>
				<text>{{ order.accepttime }}</text>
			</view>
		</view>
		
		<!-- <view style="height: 100rpx;"></view>
		<view class="order-info-bottom-btn" v-if="order.id && order.status == 0">
			<view  class="order-info-bottom-row">
				<u-button  plain size="medium" type="primary"   @click="gotoOrderForm"> 修改订单</u-button>
				<u-button  plain size="medium" type="error" @click="cancelOrder"> 取消订单</u-button>
			</view>
		</view> -->
	</view>
</template>
<style scoped>  
	.order-info-top{background-color: #19be6b;color:white;display: flex;align-items: center;padding:30rpx 30rpx 60rpx 30rpx;}
	.order-info-top-left{ display: flex;flex-direction: column;flex:1;}
	.order-info-status{font-size: 50rpx;}
	.icon-huishou{font-size: 100rpx;}
	.order-address-info{margin-top:-34rpx;}
	.order-address-info-top{display: flex;align-items: center;justify-content: space-between;}
	.order-card-title{ font-size: 34rpx;font-weight: bold;color:#333;}
	.order-address-detail{margin-top:30rpx;display: flex;align-items: center; }
	.order-address-detail-left{ margin-right:10rpx;}
	.icon-shouhuodizhi{ font-size: 80rpx;}
	.order-address-detail-right{}
	.order-info{font-size: 30rpx;}
	.order-address-contact{color:#333;font-size: 30rpx;font-weight: bold;margin-right: 20rpx;}
	.order-info-row{margin-top:20rpx;color:#666}
	.order-waste-list{margin-top: 20rpx;}
	.order-waste-item{ padding:10rpx 0;display: flex;align-items: center;justify-content: space-between;}
	.order-info-bottom-btn{background-color: white;position: fixed;bottom:0;width: 100%;padding:20rpx 20rpx 0 20rpx;text-align: center;}
	.order-info-bottom-row{display: flex;align-items: center;justify-content: space-around;}
	/deep/ .recycler-btn{display: block !important;width: 90% !important;}
	/deep/ .recycler-btn .u-btn{ width: 90% !important;}
	.phone-number{color:blue;text-decoration: underline;}
</style>
<script>  
	export default {
		data() {
			return {
				order:[],
				orderStatusName:{
					'0':'待接单','1':'已接单','2':'已完成','-1':'已取消',
				},
				fileList:[],
			}
		}, 
		methods:{
			phoneCall(number){ 
				uni.makePhoneCall({
				   phoneNumber: number
				})
			},
			getOrderInfo(orderId){
				this.$u.api.order.getOrderInfo({id:orderId}).then(res => {
					if(res.code != 1){
						this.$u.toast(res.msg)
						setTimeout(function(){
							uni.navigateBack();
						},1000)
						return false
					}
					this.order = res.data
					if(this.order?.book_photo){
						this.order.book_photo = this.order.book_photo.split(',');
						this.order.book_photo.forEach(item => {
							this.fileList.push({url:item})
						})
					}
				})
			},
			cancelOrder(){
				this.$u.api.order.cancelOrder({id:this.order.id}).then(res => {
					if(res.code == 1){
						uni.showToast({
						    title: '取消成功！',
						    icon: 'success'
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}else{
						uni.showToast({
						    title: res.msg,
						    icon: 'error'
						})
					}
					
				}).catch(err => {
				})
			},
			gotoOrderForm(){
				uni.navigateTo({
					url:"/pageA/order/form?orderId=" + this.order.id
				})
			},
		},
		onLoad(option){
			if(!option?.orderId){
				uni.navigateBack()
			}    
			this.getOrderInfo(option.orderId) 
		},
		onReady() { 
			let _this = this
			uni.$on('orderInfoUpdate', function(data) { 
				_this.getOrderInfo(_this.order.orderId) 
			}) 
		},
		onUnload() { 
			uni.$off('orderInfoUpdate') 
		}
	}
</script>